<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">角色修改</h3>
			<ul class="breadcrumb">
				<li>
					<i class="icon-home"></i>
					<a href="<c:url value="/home.html"/>">首页</a> 
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="<c:url value="/role/list.html"/>">角色管理</a>
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="#">角色修改</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box blue">
				<div class="portlet-title">
					<div class="caption"><i class="icon-bookmark"></i>角色修改</div>
				</div>
				<div class="portlet-body form">
					<c:if test="${messageErrro != null} ">
						<div class="alert alert-error">
							<strong>错误!</strong>${messageError}
						</div>
					</c:if>
					<form id="role-eidt-form" action="<c:url value='/role/${role.id}/update.html'/>" method="post" class="form-horizontal">
						<div class="alert alert-error hide">请检查下面的错误</div>
						<div class="control-group">
							<label class="control-label">角色名称：</label>
							<div class="controls">
								<input type="text" name="name" value="${role.name}" class="large m-wrap"/>
							</div>
						</div>
						<div class="form-actions">
							<button class="btn blue" type="submit"><i class="icon-ok"></i> 保存</button>
							<a href="<c:url value='/role/list.html' />" class="btn black" >
								<i class="icon-share-alt"></i> 返回
							</a>
						</div> 
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$(function(){
		var form = $("#role-eidt-form");
		var error = $(".alert-error",form);
		form.validate({
			errorElement:"span",
			errorClass:"help-inline",
			rules:{
				"name":{
					required:true,
				}
			},messages:{
				"name":{
					required:"请输入角色名称"
				}
			},
			invalidHandler: function (event, validator) { //display error alert on form submit              
	            error.show();
	            App.scrollTo(error, -200);
        	},
	        highlight: function (element) { // hightlight error inputs
	            $(element).closest(".help-inline").removeClass("ok"); // display OK icon
	            $(element).closest(".control-group").removeClass("success").addClass("error"); // set error class to the control group
	        },
	        unhighlight: function (element) { // revert the change dony by hightlight
	            $(element).closest(".control-group").removeClass("error"); // set error class to the control group
	        },
	        success: function (label) {
	            label.addClass("valid").addClass("help-inline ok").closest(".control-group").removeClass("error").addClass("success"); // set success class to the control group
	        },
	        submitHandler: function (form) {
	            form.submit();
	        }
		});
	})
</script>
